<template>
	<view>
		<!-- 顶部导航栏-->
		<!-- <u-navbar is-back title="菜谱搜索" :bgColor="background" title-color="#fff" :border-bottom="false"
			back-icon-color="#fff">
		</u-navbar> -->
		<!-- 正文内容 -->
		<view class="">
			<!-- 搜索栏 -->
			<view class="search-container">
				<u-search placeholder="海参炒面" v-model="keyword" shape="square" clearabled search-icon-color="#ee8131"
					bg-color="#fff" :action-style="actionStyle" margin="7rpx 34rpx 20rpx 98rpx" @custom="search"
					@clear="clearSearch">
				</u-search>
			</view>
			<!-- 精品名厨 -->
			<view class="member-text">
				<text>精品名厨视频——会员专享</text>
				<image src="https://s1.ax1x.com/2022/07/28/vpqEss.png" mode="" class="member-image"></image>
			</view>
			<view class="member-container">
				<view class="member-item" v-for="item in menuTvList" :key="item._id" @tap="getMenuDetail(item._id)">
					<video :src="item.coverpic" mode="" class="member-image"></video>
					<text class="member-name">{{item.name}}</text>
					<view class="member-bottom">
						<view class="member-bottom-left">
							<text class="member-subtitle">{{item.pageview}}</text>
							<image src="https://s1.ax1x.com/2022/07/28/vp7fW4.png" mode="" class="member-bottom-image">
							</image>
						</view>
						<view class="member-bottom-right">
							<text class="member-subtitle">{{item.collections}}</text>
							<image src="https://s1.ax1x.com/2022/07/28/vp7WYF.png" mode="" class="member-bottom-image">
							</image>
						</view>
					</view>
				</view>
			</view>
			<view class="search-content" >
				<!-- 菜品搜索展示 -->
				<view class="recommand-container">
					<view class="recommand-item"
					 @tap="getMenuDetail(item._id)"
					  v-for="item in searchMenuList"
						:key="item._id">
						<image :src="item.coverpic" mode="" class="recommand-image"></image>
						<view class="recommand-content">
							<text class="recommand-text1">{{item.name}}</text>
							<view class="recommand-bottom">
								<view class="recommand-bottom-left">
									<text class="recommand-subtitle">{{item.pageview}}</text>
									<image src="https://s1.ax1x.com/2022/07/28/vp7fW4.png" mode="" class="recommand-bottom-image">
									</image>
								</view>
								<view class="recommand-bottom-right">
									<text class="recommand-subtitle">{{item.collections}}</text>
									<image src="https://s1.ax1x.com/2022/07/28/vp7WYF.png" mode=""
										class="recommand-bottom-image">
									</image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="search-content" v-else>
				<!-- 未搜索时的随机推荐 -->
				<view class="recommand-container">
					<view class="recommand-item" v-for="item in menuDetailList" :key="item._id"
						@tap="getMenuDetail(item._id)">
						<image :src="item.coverpic" mode="" class="recommand-image"></image>
						<view class="recommand-content">
							<text class="recommand-text1">{{item.name}}</text>
							<view class="recommand-bottom">
								<view class="recommand-bottom-left">
									<text class="recommand-subtitle">{{item.pageview}}</text>
									<image src="../../static/home/pageview.png" mode="" class="recommand-bottom-image">
									</image>
								</view>
								<view class="recommand-bottom-right">
									<text class="recommand-subtitle">{{item.collections}}</text>
									<image src="../../static/home/collections.png" mode=""
										class="recommand-bottom-image">
									</image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex"
	const {
		mapState,
		mapMutations
	} = createNamespacedHelpers("searcModule")
	export default {
		data() {
			return {
				status: true,
				background: 'linear-gradient(45deg, rgb(238, 129, 49), rgb(240, 154, 55))',
				//搜索关键字动态绑定
				keyword: '',
				//搜索空间右侧字体样式
				actionStyle: {
					"color": "#fff"
				},
				//菜品推荐
				memberRecommends: [],
				//搜索的菜品数据
				menuDetails: "",
				//精品名厨视频
				vipVideos: "",
				isVip: false
			}
		},
		methods: {
			...mapMutations(['search']),
			async menuData() {
				//菜品搜索
				let searchMenu = await this.$api.search.searchMenuData()
				let searchMenuMessage = searchMenu.data.menus
				//菜单详情
				let menuDetail = await this.$api.search.menuDetailData()
				let menuDetailMessage = menuDetail.data.message
				//视频
				let menuTv = await this.$api.search.memberRecommendData()
				let menuTvMessage = menuTv.data.message

				let searchquest = {
					searchMenuMessage,
					menuDetailMessage,
					menuTvMessage
				}
				this.search(searchquest)
				// console.log(searchquest);
				console.log(searchMenuMessage);
				// console.log(menuDetailMessage);
				// console.log(this.menuTvList[0]);
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			}
		},
		computed: {
			...mapState(['searchMenuList', 'menuDetailList', 'menuTvList'])
		},
		created() {
			this.menuData()
		}
	}
</script>

<style lang="scss" scoped>
	.search-container {
		width: 100%;
		height: 100rpx;
		background-image: linear-gradient(45deg, rgb(238, 129, 49), rgb(240, 154, 55));
		overflow: hidden;
	}

	.member-text {
		margin-top: 26rpx;
		padding: 0 32rpx;
		display: flex;

		.member-image {
			width: 40rpx;
			height: 40rpx;
			margin-left: 15rpx;
		}
	}

	//隐藏滚动条
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
	}

	.member-container {
		padding: 16rpx 0 0 32rpx;
		display: flex;
		overflow-x: scroll;
	}

	.member-item {
		width: 334rpx;
		height: 345rpx;
		margin-right: 20rpx;
		background-color: #f9f9f9;

		.member-image {
			width: 334rpx;
			height: 248rpx;
			border-radius: 10rpx;
		}

		.member-name {
			padding-left: 10rpx;
		}

		.member-subtitle {
			font-size: 27rpx;
			color: #aaa;
		}

		.member-bottom {
			display: flex;
			padding: 10rpx 0 0 10rpx;

			.member-bottom-left {
				margin-right: 30rpx;
				display: flex;
				align-items: center;
			}

			.member-bottom-right {
				display: flex;
				align-items: center;
			}

			.member-bottom-image {
				width: 28rpx;
				height: 25rpx;
				margin-left: 10rpx;
			}
		}

	}

	.recommand-container {
		padding: 20rpx 32rpx;

		.recommand-item {
			display: flex;
			height: 210rpx;
			margin-bottom: 16rpx;

			.recommand-image {
				width: 314rpx;
				height: 210rpx;
				flex-shrink: 0;
				border-radius: 10rpx;
				margin-right: 18rpx;
			}

			.recommand-content {
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.recommand-text1 {
					font-size: 30rpx;
					margin-top: 10rpx;
					margin-bottom: 20rpx;
				}

				.recommand-text2 {
					color: #b3b3b3;
					font-size: 27rpx;
					margin-bottom: 65rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}

				.recommand-bottom {
					display: flex;
					padding: 10rpx 0 0 10rpx;

					.recommand-subtitle {
						color: #b3b3b3;
						font-size: 27rpx;
					}

					.recommand-bottom-left {
						margin-right: 30rpx;
						display: flex;
						align-items: center;
					}

					.recommand-bottom-right {
						display: flex;
						align-items: center;
					}

					.recommand-bottom-image {
						width: 28rpx;
						height: 25rpx;
						margin-left: 10rpx;
					}
				}
			}
		}
	}
</style>
